import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;

class TransformDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('变换'),
          centerTitle: true,
        ),
        // Transform的变换是应用在绘制阶段，而并不是应用在布局(layout)阶段，
        // 所以无论对子组件应用何种变化，其占用空间的大小和在屏幕上的位置都是固定不变的，
        // 因为这些是在布局阶段就确定的
        // RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，
        // 但不同的是：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小
        body: ConstrainedBox(
          // 使Column水平方向铺满屏幕
          constraints: BoxConstraints(minWidth: double.infinity),
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(top: 50),
                color: Colors.black,
                // 倾斜
                child: Transform(
                  alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
                  transform: Matrix4.skewY(0.3),
                  child: Container(
                    padding: EdgeInsets.all(10),
                    color: Colors.deepOrange,
                    child: Text('Apartment for rent!'),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 30),
                color: Colors.red,
                // 平移
                child: Transform.translate(
                  offset: Offset(-20, -5),
                  child: Text('Hello world!'),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 50),
                color: Colors.red,
                // 旋转
                child: Transform.rotate(
                  angle: math.pi/2,
                  child: Text('Hello world!'),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 50),
                color: Colors.red,
                // 缩放
                child: Transform.scale(
                  scale: 1.5,
                  child: Text('Hello world!'),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 50),
                color: Colors.red,
                // 旋转，位置和大小发生变化
                child: RotatedBox(
                  quarterTurns: 1, //顺时针旋转90度(1/4圈)
                  child: Text('Hello world!'),
                ),
              ),
            ],
          ),
        ),
      );
}
